<template>
  <div class="site">
    <!-- 基础设置 -->
    <div class="basis-card">
      <div class="basis">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基础设置</span>
          </div>
          <el-form label-width="100px">
            <el-form-item
              :label="item.label"
              v-for="(item, index) in basicForm"
              :key="index"
            >
              <el-input size="mini" v-model="item.value"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="right"
                type="primary"
                size="small"
                @click="update_basic"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <!-- 资料卡 -->
      <div class="data-card">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>资料卡</span>
          </div>
          <el-form label-width="80px">
            <el-form-item
              :label="item.label"
              v-for="(item, index) of dataCardinfo"
              :key="index"
              class="flexed"
            >
              <el-input size="mini" v-model="item.value"></el-input>
              <el-button
                type="danger"
                size="mini"
                @click="deleteNewCard(index)"
              >
                <i class="el-icon-delete"></i> 删除</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                class="right"
                @click="saveCustom"
                >保存</el-button
              >
              <el-button
                size="small"
                class="right margin"
                round
                @click="addCustom"
              >
                <i class="el-icon-plus"></i> 添加自定义</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
    <!-- 页脚徽标 -->
    <div class="footer-logo">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>页脚徽标</span>
        </div>
        <el-form
          label-width="80px"
          :inline="true"
          v-for="(footerLogo, index) of footerLogos"
          :key="index"
        >
          <el-form-item
            :label="key"
            v-for="(key, i) of footerLogoKeys[index]"
            :key="i"
          >
            <el-input
              size="mini"
              :disabled="key == 'id' ? true : false"
              v-model="footerLogo[key]"
            ></el-input>
          </el-form-item>
          <el-button
            type="danger"
            size="mini"
            style="transform: translate(10px, 46px)"
            @click="removeLG(footerLogo.id)"
            ><i class="el-icon-delete"></i>删除</el-button
          >
        </el-form>
        <!-- 添加按钮 -->
        <el-button round size="small" @click="addFooterlg">
          <i class="el-icon-plus"></i> 添加徽标</el-button
        >
        <!-- 保存按钮 -->
        <el-button type="primary" style="float: right; margin-bottom: 15px" @click="updateLG"
          >保存</el-button
        >
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入接口
import {
  updateSiteAPI,
  updateDataCardAPI,
  removeDataCard,
  getFooterLogoAPI,
  addFooterLogo,
  removeFlgAPI,
  updateFlgAPI
} from '@/API/api' // , updateDataCardAPI
// 导入 axios 实例对象
import request from '@/request/request'
// import { mapActions, mapState } from 'vuex'
export default {
  name: 'Site',
  components: {},
  data() {
    return {
      // 基础信息列表
      basicForm: [],
      // 定时器阀门
      flag: true,
      // 资料卡信息
      dataCardinfo: null,
      // 资料卡字段
      dataFieldName: [],
      // 页脚徽标列表
      footerLogos: []
    }
  },
  computed: {
    footerLogoKeys() {
      return this.footerLogos.map((item) => Object.keys(item))
    }
  },
  methods: {
    // 获取基础信息列表
    async getBasicList() {
      this.basicForm = await request({
        method: 'GET',
        url: '/basis'
      })
        .then((res) => {
          return res.data.data.map((item) => JSON.parse(item))
        })
        .catch((err) => {
          // console.log(err)
          if (err) return this.$message.error(err.message)
        })
      // console.log(this.basicForm)
    },
    // 基础信息保存按钮
    update_basic() {
      // console.log(this.basicForm)
      // 节流：减少触发的次数
      const flag = true
      if (flag) {
        this.flag = false
        updateSiteAPI(this.basicForm)
          .then((res) => {
            this.$message.success(res.data.msg)
            this.getBasicList()
          })
          .catch((err) => {
            return err.message
            // console.log(err)
          })
        setTimeout(() => {
          this.flag = true
        }, 2000)
      }
    },
    // 获取资料卡信息
    getDataCard() {
      request({
        method: 'GET',
        url: '/datacard'
      })
        .then((res) => {
          // console.log(res)
          this.dataCardinfo = res.data.data.values.map((item) =>
            JSON.parse(item)
          )
          // console.log(res)
          this.dataFieldName = res.data.data.keys
        })
        .catch((err) => this.$message.error(err.message))
    },
    // 添加自定义
    addCustom() {
      // console.log(this.dataCardinfo)
      this.dataCardinfo.push({
        label: '自定义',
        value: '{"title": "", "content": ""}'
      })
      const num = this.dataCardinfo.slice(8).length
      // console.log(num)
      request({
        method: 'POST',
        url: '/addCustom',
        data: {
          num,
          value: this.dataCardinfo.splice(-1, 1)
        }
      })
        .then((res) => {
          // console.log(res.data)
          this.$message.success(res.data.msg)
          this.getDataCard()
        })
        .catch((err) => {
          // console.log(err)
          this.$message.error(err.message)
        })
    },
    // 保存自定义
    async saveCustom() {
      // console.log(this.dataFieldName)
      // console.log(this.dataCardinfo)
      const params = {}
      this.dataFieldName.forEach((key, index) => {
        params[key] = JSON.stringify(this.dataCardinfo[index])
      })
      // console.log(params)
      try {
        const { data: res } = await updateDataCardAPI(params)
        // console.log(res)
        this.$message.success(res.msg)
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 删除资料卡片子项
    deleteNewCard(i) {
      this.$confirm('是否删除此单元格？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async(actions) => {
          if (actions === 'confirm') {
            const field = this.dataFieldName[i]
            const { data: res } = await removeDataCard(field)
            if (res.status !== 0) return this.$message.error(res.msg)
            // console.log(res)
            this.$message.success(res.msg)
            this.getDataCard()
          } else {
            return this.$message.warning('已取消删除!')
          }
        }
      })
    },
    // 获取页脚徽标
    async getFooterLg() {
      const { data: res } = await getFooterLogoAPI()
      if (res.status !== 0) return this.$message.error(res.msg)
      // console.log(res)
      this.footerLogos = res.data
    },
    // 添加页脚徽标
    async addFooterlg() {
      // 添加的页脚徽标
      const params = {
        title: '',
        url: '',
        subject: '',
        value: '',
        color: ''
      }
      const { data: res } = await addFooterLogo(params)
      if (res.status !== 0) return this.$message.error(res.msg)
      // console.log(res)
      this.$message.success(res.msg)
      // 重新获取页脚徽标
      this.getFooterLg()
    },
    // 删除页脚徽标
    async removeLG(id) {
      this.$confirm('是否删除此行所有单元格？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async(actions) => {
          if (actions === 'confirm') {
            const { data: res } = await removeFlgAPI(id)
            if (res.status !== 0) return this.$message.error(res.msg)
            // console.log(res)
            // 从新获取页脚徽标
            this.$message.success(res.msg)
            this.getFooterLg()
          } else {
            this.$message.warning('已取消删除')
          }
        }
      })
    },
    // 修改页脚徽标数据
    async updateLG() {
      const { data: res } = await updateFlgAPI(this.footerLogos)
      if (res.status !== 0) return this.$message.error(res.msg)
      console.log(res)
      this.$message.success(res.msg)
      this.getFooterLg()
    }
  },
  created() {
    // 获取基础设置信息
    this.getBasicList()
    // 获取资料卡信息
    this.getDataCard()
    // 获取页脚徽标
    this.getFooterLg()
  }
}
</script>

<style lang="less" scoped>
.site {
  padding: 20px 20px 0;
  .basis-card {
    display: flex;
    justify-content: space-between;
    .basis,
    .data-card {
      width: 830px;
    }
    .basis {
    }
  }
  .right {
    float: right;
  }

  .box-card {
  }
  .footer-logo {
    margin-top: 20px;
    padding-bottom: 40px;
    /deep/.el-form-item__label {
      display: flex;
      color: #463f3f;
      font-weight: 700;
    }
  }
}

.el-button--primary {
  margin-left: 10px;
}

/deep/.el-form-item__label {
  color: #463f3f;
  font-weight: 400;
}

.el-card {
  font-weight: 700;
}

.flexed {
  width: 100%;
  .el-input {
    float: left;
    width: 80%;
    vertical-align: middle;
  }
  .el-button {
    float: right;
    margin: 6px 10px 0 0;
  }
}

.clearfix {
  span {
    color: #4970a7;
  }
}
</style>
